<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            /* 通配符选择器 */
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: black;
            }
            h1 {
                text-align: center;
                color: white;
            }
            #general {
                width: 840px;
                margin: 20px auto;
                text-align: center;
            }
            #general>li {
                /* float: left; */
                display: inline-block;
                margin: 10px 20px;
                list-style: none;
                color: white;
            }
            #general>li>img, #general>li>div {
                vertical-align: middle;
            }
            .detail {
                font-size: 12px;
            }
            #chart>div {
                float: left;
                width: 480px;
                height: 320px;
                margin: 10px 50px;
                border: 1px solid white;
            }
            #chart {
                width: 1200px;
                margin: 0 auto;
            }
            #cal {
                width: 520px;
                margin: 10px auto;
                text-align: center;
            }
            #cal>input, #cal>button {
                margin: 0 4px;
                border: none;
                outline: none;
            }
            #cal>button {
                color: white;
                background-color: darkcyan;
                width: 58px;
                height: 22px;
            }
        </style>
    </head>
    <body>
        <!--
        前端页面 = Tag + CSS + JavaScript
        Tag - 承载内容 - content
        CSS - 层叠样式表 - 页面显示 - display
            ~ 内嵌样式表（通过标签的style属性设置样式，不推荐使用）
            ~ 内部样式表（在head部分通过style标签插入CSS选择器）
            ~ 外部样式表（单独的文件，使用link标签引入进来）
        JS  - 交互行为 - behavior
        浏览器中的JavaScript有三个要素：
            ~ ECMAScript - ES - 语法规范（关键字、运算符、分支、循环、对象、函数、……）
            ~ BOM - Browser Object Model - 浏览器对象模型 - window
                - location / history / screen / navigator
                - alert() / prompt() / confirm() / open() / close()
                - setTimeout() / setInterval()
            ~ DOM - Document Object Model - 文档对象模型 - document
                - querySelector() / querySelectorAll() - 通过CSS选择器获取页面上的标签
                - createElement() - 创建新标签
                - appendChild() / insertBefore() - 添加新标签
                - removeChild() - 删除标签
                - textContent / innerHTML - 修改标签内容
                - style - 修改标签样式
        -->
        <!--
        后端渲染：通过后端代码（Java、Python、PHP等）渲染模板页面为页面生成动态内容
        缺点：
            ~ 搞后端的人还需要具备一些前端知识
            ~ 开销较大，增加服务器的负担和压力
        前端渲染：后端是负责处理业务和提供数据，前端实现页面的渲染（前后端分离开发）
        优点：
            ~ 前后端的工作是独立的，相互不影响
            ~ 通过浏览器中的JavaScript引擎实现页面渲染，不增加服务器的负担

        Python程序会提供JSON格式的数据，前端通过JavaScript请求JSON数据，
        获得数据后通过Vue.js实现页面的渲染（把数据动态的填写到页面上）
        -->
        <h1>电商订单数据可视化项目</h1>
        <hr>
        <div id="app">
            <ul id="general">
                <li v-for="item in data_items">
                    <img src="images/medal.png" width="36">
                    <div style="display: inline-block">
                        <div class="detail">{{ item.value | numberFormat }}{{ item.unit }}</div>
                        <div class="detail">{{ item.name }}</div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 如果需要在前端生成统计图表，最好的选择是ECharts和D3.js -->
        <!-- 创建一个用于绘图的div，通过CSS指定好绘图区域的宽度和高度 -->
        <div id="chart">
            <div id="gmv"></div>
            <div id="bar"></div>
            <div id="channel"></div>
            <div id="kline"></div>
        </div>
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> -->
        <script src="/static/js/vue.min.js"></script>
	    <script>
	        // 通过JavaScript代码获取JSON数据，然后交给Vue.js渲染页面
            let app = new Vue({
                el: '#app',
                data: {
                    data_items: []
                },
                filters: {
                    numberFormat(x) {
                        return x.toLocaleString()
                    }
                },
                created() {
                    fetch('/api/general_data')
                        .then(resp => resp.json())
                        .then(json => this.data_items = json.results)
                }
            })
	    </script>
        <!-- 第一步：引入ECharts的JS文件 -->
        <script src="/static/js/echarts.min.js"></script>
        <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script> -->
        <!-- 使用ECharts库实现图表渲染 -->
        <script>
            let gmvChart = echarts.init(document.querySelector('#gmv'), 'dark')
            fetch('/api/gmv_by_month')
                .then(resp => resp.json())
                .then(json => {
                    let gmvOption = {
                        title: {
                            text: 'GMV走势',
                            top: '5%',
                            left: '5%'
                        },
                        legend: {
                            data: ['GMV'],
                            top: '5%'
                        },
                        xAxis: {
                            type: 'category',
                            data: json.x
                        },
                        yAxis: {
                            type: 'value',
                            min: 400,
                            max: 1200,
                            interval: 100
                        },
                        grid: {
                            bottom: '10%'
                        },
                        series: [
                            {
                                name: 'GMV',
                                type: 'line',
                                data: json.y,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    }
                    gmvChart.setOption(gmvOption)
                })

            let channelChart = echarts.init(document.querySelector('#channel'), 'dark')
            fetch('/api/channel_data')
                .then(resp => resp.json())
                .then(json => {
                    let channelOption = {
                        title: {
                            text: '渠道获客占比',
                            top: '5%',
                            left: '5%'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        // legend: {
                        //     type: 'scroll',
                        //     orient: 'vertical',
                        //     right: 10,
                        //     top: 20,
                        //     bottom: 20
                        // },
                        series: [
                            {
                                name: '获客渠道',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                center: ['50%', '55%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: true
                                },
                                // emphasis: {
                                //     label: {
                                //         show: true,
                                //         fontSize: '18',
                                //         fontWeight: 'bold'
                                //     }
                                // },
                                labelLine: {
                                    show: true
                                },
                                data: json.results
                            }
                        ]
                    }
                    channelChart.setOption(channelOption)
                })

            // 将指定的div处理成绘图用的画布
            let barChart = echarts.init(document.querySelector('#bar'), 'dark')
            fetch('/api/sales_data')
                .then(resp => resp.json())
                .then(json => {
                    // 准备图表需要使用到的数据
                    let barOption = {
                        title: {
                            text: '大区销售',
                            top: '5%',
                            left: '5%'
                        },
                        legend: {
                            data:['华东区', '华南区', '华北区', '西南区'],
                            top: '5%',
                            left: '25%',
                        },
                        xAxis: {
                            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                        },
                        yAxis: {
                        },
                        grid: {
                            top: '25%',
                            bottom: '10%'
                        },
                        series: [
                            {
                                name: '华东区',
                                type: 'bar',
                                data: json.y1
                            },
                            {
                                name: '华南区',
                                type: 'bar',
                                data: json.y2
                            },
                            {
                                name: '华北区',
                                type: 'bar',
                                data: json.y3
                            },
                            {
                                name: '西南区',
                                type: 'bar',
                                data: json.y4
                            }
                        ]
                    }
                    // 把数据加到图表上
                    barChart.setOption(barOption)
                })

            let klineChart = echarts.init(document.querySelector('#kline'), 'dark')
            fetch('/api/stock_data')
                .then(resp => resp.json())
                .then(json => {
                    let klineOption = {
                        title: {
                            text: '公司股票',
                            top: '5%',
                            left: '5%'
                        },
                        xAxis: {
                            data: json.x
                        },
                        yAxis: {
                            scale: true,
                            splitArea: {
                                show: true
                            }
                        },
                        dataZoom: [
                            {
                                show: true,
                                type: 'slider',
                                top: '90%',
                                start: 0,
                                end: 100
                            }
                        ],
                        series: [
                            {
                                type: 'k',
                                data: json.y
                            }
                        ]
                    }
                    klineChart.setOption(klineOption)
                })
        </script>
    </body>
</html>